﻿<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta charset="UTF-8" />
    <title>易景三维场景真实导航|室内三维可视化引擎|ESmap</title>
    <meta
      name="keywords"
      content="易景三维场景真实导航,室内三维场景,三维场景引擎,三维场景制作,室内定位,易景三维场景,ESMap"
    />
    <meta
      name="description"
      content="易景三维场景第三人称导航,易景室内三维可视化引擎提供三维场景浏览、缩放、旋转、图层显隐等基础功能，支持自定义室内三维场景显示风格及样式，可自动绘制楼层热力图、散点图等专题三维场景，快速进行空间大数据分析展示。支持跨楼层精准的点到点之间的最短、最优路径计算，支持对路径结果进行导航和动画,并提供丰富的三维场景主题资源供二次开发调用。"
    />
    <link href="../lib/bootstrap.min.css" rel="stylesheet" />
    <link href="css/common.css" rel="stylesheet" />
    <link href="css/iconfont/iconfont.css" rel="stylesheet" />
  </head>
  <style type="text/css">
    #pannel {
      position: absolute;
      left: 2%;
      bottom: 10%;
      z-index: 999;
    }

    #description {
      position: absolute;
      left: 50%;
      top: 86px;
      padding: 10px 25px;
      background: rgba(255, 255, 255, 255);
      border-radius: 4px;
      margin-left: -140px;
      opacity: 0.7;
    }

    #tool-tip {
      position: absolute;
      color: #fff;
      font-size: 18px;
      height: 25px;
      line-height: 25px;
      padding: 0 5px;
      z-index: 2;
      pointer-events: none;
      background-color: rgba(0, 0, 0, 0.3);
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      display: none;
    }

    .container-fluid h1 {
      text-align: center;
    }
  </style>

  <body ms-controller="ctrl" class="ms-controller">
    <div id="map-container"></div>
    <nav class="navbar navbar-inverse">
      <div class="container-fluid">
        <h1>易景室内三维可视化引擎 (真实导航)</h1>

        <div class="tips-right">
          <span class="tip1"></span>
          <a class="tip2" onclick="tipClick('/api/senior/pathNavigation/')"></a>
        </div>
        <div class="tips-msg">
          <div class="msg msg1">
            <div class="erweima"></div>
            <p>手机扫一扫进入体验</p>
          </div>
          <div class="msg msg2">
            <h4>真实导航</h4>
            <p>1. 自动规划最短路径</p>
            <p>2. new esmap.ESNavigation({...}) 创建导航对象</p>

            <div style="display: none">
              易景三维场景第三人称导航,易景室内三维可视化引擎提供三维场景浏览、缩放、旋转、图层显隐等基础功能，支持自定义室内三维场景显示风格及样式，可自动绘制楼层热力图、散点图等专题三维场景，快速进行空间大数据分析展示。支持跨楼层精准的点到点之间的最短、最优路径计算，支持对路径结果进行导航和动画,并提供丰富的三维场景主题资源供二次开发调用。
            </div>
          </div>
        </div>
      </div>
    </nav>
    <div id="description">暂无导航提示信息</div>
    <div id="pannel">
      <input
        type="button"
        class="btn btn-default btnclass"
        onclick="reset()"
        value="重置"
      />
      <input
        type="button"
        class="btn btn-default btnclass"
        onclick="startNavi()"
        value="真实导航开始"
      />
      <input
        type="button"
        class="btn btn-default btnclass"
        data-toggle="button"
        onclick="toggle()"
        value="显示/隐藏真实定位路线"
      />
    </div>
    <script src="../lib/config.js"></script>
    <script src="../lib/esmap-3.0.min.js"></script>
    <script src="../lib/jquery-2.1.4.min.js"></script>
    <script src="../lib/jquery.qrcode.min.js"></script>
    <script src="../lib/tips_controls.js"></script>
    <script src="../lib/bootstrap.min.js"></script>

    <script type="text/javascript">
      //定义全局map变量
      var map;
      var esmapID = getQueryString("id") || defaultOpt.mapID;
      // 导航对象
      var navi;
      var maxEndDistance = 0.01;
      var floorControl;
      var lm; //定位标注
      //坐标点下标
      var coordIndex = 0;
      var coordsData = null;
      var line = null;
      var lineVisible = true;
      var timer;
      var mapCoord = null;
      var building = null;
      $(function () {
        if (navi) {
          navi.stop();
          navi = null;
        }
        // 楼层控制控件配置参数
        var ctlOpt = new esmap.ESControlOptions({
          position: esmap.ESControlPositon.RIGHT_TOP,
          imgURL: "image/wedgets/",
          // allLayer: true
          // size:"normal"
        });
        map = new esmap.ESMap({
          mode: esmap.MapMode.Building,
          container: $("#map-container")[0], // 渲染dom
          mapDataSrc: '../data', //三维场景数据位置
          focusAlphaMode: true, // 对不可见图层启用透明设置 默认为true
          focusAnimateMode: true, // 开启聚焦层切换的动画显示
          focusAlpha: 0.9, // 对不聚焦图层启用透明设置，当focusAlphaMode = true时有效
          mapAudioSrc: "../lib", //导航语音位置,导航的必须配置
          token: "escope",
          focusFloor: 1,
        });
        map.openMapById(esmapID);
        map.showCompass = true; //显示指南针
        //三维场景加载完成回调
        map.on("loadComplete", function () {
          building = map.getBuilding();
          floorControl = new esmap.ESScrollFloorsControl(map, ctlOpt);
          createNavi();
          setStartEnd();
          createLocMarker();
          $.getJSON("data.json", function (data) {
            coordsData = data.points;
          });
        });
        map.on("mapClickNode", function (e) {
          console.log(e);
        });
      });

      function createNavi() {
        if (building.naviData.length == 0) {
          console.warn("三维场景导航数据信息不存在！");
          return;
        }
        if (!navi) {
          //初始化导航对象
          navi = new esmap.ESNavigation({
            map: map, //必需
            //以下皆为可选-----------------
            // mode: 1,           //默认为1。  1:人行，2：车行
            audioPlay: true, //默认为false  是否开启语音播报
            followAngle: true, //默认为false  是否开启视角角度跟随
            followPosition: true, //默认为true  是否开启视角位置跟随
            followGap: 0, //三维场景事件跟随间隔，设置为0则为实时跟随。默认为3，表示3秒
            lineStyle: {
              //自定义导航线的样式，如不指定则为默认样式
              color: "#58a2e4",
              //设置线为导航线样式
              lineType: esmap.ESLineType.ESARROW,
              // lineType: esmap.ESLineType.DASH,
              lineWidth: 6,
              fixedWidth: true,
              offsetHeight: 0.5,
              smooth: true,
              noAnimate: true,
              // 设置边线的颜色
              // godEdgeColor: '#920000',
              // 设置箭头颜色
              // godArrowColor: "#ffffff"
            },
            scaleAnimate: true, //默认为true   是否开启/关闭 所有导航开始时的动画。
            // 以下属性只有当scaleAnimate属性为true时才生效。用来配置开始导航之后的过渡动画效果。
            scaleLevel: 1, //导航时缩放等级，默认1
            tiltAngle: 20, //倾斜角，默认80
          });
        }
        navi.on("walking", function (data) {
          //定位旋转
          lm.rotateTo(-data.angle);
        });
        navi.on("naviTip", function (message) {
          $("#description").html(message);
        });
        navi.on("complete", function () {
          $("#description").html("到达终点");
          console.log("导航停止");
        });
      }

      function toggle() {
        lineVisible = !lineVisible;
        line && (line.o3d_.visible = lineVisible);
      }

      function reset(){
        clearAll();
        setStartEnd();
      }


      function clearAll() {
        clearInterval(timer);
        lm &&
          lm.moveTo({
            x: 12683434.546457876,
            y: 2557896.0062286886,
            time: 0.2,
            fnum: 1,
          });
        $("#description").html("暂无导航信息");
        // navi.clearNaviLines();
        navi.clearAll();
        map.clearLineMarkById("routes");
        coordIndex = 0;
        createLocMarker();
      }

      function startNavi() {
        clearAll();
        setStartEnd();
        navi.once('success',function(){
          map.ESAudioTool.playSoundByName("startNaving");
          navi.start();
          navi.once("reRouting", function () {
            $("#description").text("路径偏移，重新规划路径");
          });
          updateCoord(); //直接开始导航。
        })

      }
      //定位真实导航坐标
      function updateCoord() {
        var points = [];
        timer = setInterval(function () {
          if (coordIndex >= coordsData.length) {
            clearInterval(timer);
            return;
          }
          var coord = coordsData[coordIndex];
          navi.walkTo(coord);
          points.push(coord);
          drawLine(points);
          coordIndex++;
        }, 1000);
      }
      function setStartEnd() {
        if (navi) {
          navi.setStartPoint({
            x: 12683425.395161062,
            y: 2557886.083905697,
            fnum: 1,
            height: 1,
            url: "image/start.png",
            size: 64,
          });
          navi.setEndPoint({
            x: 12683467.367029807,
            y: 2557862.8654304906,
            fnum: 1,
            height: 1,
            url: "image/end.png",
            size: 64,
          });
          navi.getRouteResult({
            drawRoute: true,
          });
        }
      }

      function drawLine(points) {
        if (points.length && points.length <= 1) return;
        map.clearLineMarkById("routes");
        //配置线标注样式
        var lineStyle = {
          fixedWidth: true,
          lineWidth: 4,
          alpha: 0.8,
          offsetHeight: 0,
          smooth: true,
          lineType: esmap.ESLineType.FULL,
        };

        //创建线标注对象
        line = new esmap.ESLineMarker({
          id: "routes",
          points,
          style: lineStyle,
        });
        //调用三维场景的画线方法
        map.drawLineMark(line);
        line.o3d_.visible = lineVisible;
      }

      function createLocMarker() {
        lm = new esmap.ESLocationMarker({
          url: "image/pointer.png",
          size: 150,
          height: 30,
        });
        map.addLocationMarker(lm);
        lm.setPosition({
          x: 12683434.546457876,
          y: 2557896.0062286886,
          floornum: 1,
          zOffset: 1, //离地面的偏移量
        });
        //为navi对象绑定定位标注
        navi.locationMarker = lm;
      }
    </script>
  </body>
</html>
